<template>
  <div class="chart-trend">
    {{term}}
    <span>{{rate}}%</span>
    <span :class="['chart-trend-icon', trend]" style=""><a-icon :type="'caret-' + trend" /></span>
  </div>
</template>

<script>
  module.exports = {
    name: 'Trend',
    props: {
      term: {
        type: String,
        required: true
      },
      target: {
        type: Number,
        required: false,
        default: 0
      },
      value: {
        type: Number,
        required: false,
        default: 0
      },
      isIncrease: {
        type: Boolean,
        required: false,
        default: null
      },
      percent: {
        type: Number,
        required: false,
        default: null
      },
      scale: {
        type: Number,
        required: false,
        default: 2
      }
    },
    data () {
      return {
        trend: this.isIncrease ? 'up' : 'down',
        rate: this.percent
      }
    },
    created () {
      this.trend = this.caulateTrend();
      this.rate = this.caulateRate();
    },
    methods: {
      caulateRate () {
        return (this.percent === null ? Math.abs(this.value - this.target) * 100 / this.target : this.percent).toFixed(this.scale)
      },
      caulateTrend () {
        let isIncrease = this.isIncrease === null ? this.value >= this.target : this.isIncrease
        return isIncrease ? 'up' : 'down'
      }
    }
  };
</script>

<style scoped>
  .chart-trend {
    display: inline-block;
    font-size: 14px;
    line-height: 22px;
  }
  .chart-trend .chart-trend-icon {
    font-size: 12px;
  }
  .chart-trend .chart-trend-icon.up {
    color: #f5222d;
  }
  .chart-trend .chart-trend-icon.down {
    color: #52c41a;
  }
</style>
